<!--
@Descripttion 导入弹框 (待完善)
@version 1.0.0
@Author Bell
@ 使用
  引入组件
    import Import from '@/components/dialog/import'
  注册组件
    components: {
      Import
    }
  使用
    <Import :win="{show: false}" api="" />
    <Import :win="{show: false}" api="" :data="{}" :fileSize="5" template="" />
    win       Object  必填       弹框基础参数 参数格式{show: false}
    api       String  必填       导入接口地址 (如无此项着不显示导入按钮)
    data      Object  默认值({}) 导入接口参数
    fileSize  Number  默认值(5)  导入文件大小限制 单位MB
    template  String  默认值('') 导入模板下载地址
 -->
<template>
  <el-dialog :title="$t('dialog.Import')" :visible.sync="win.show" width="400px">
    <el-upload
      :action="baseURL + api"
      :data="data"
      :before-upload="beforeUpload"
      :on-success="success"
      :on-error="error"
      :accept="accept"
      :headers="headers"
      :multiple="true"
      :show-file-list="false"
      class="upload-demo"
      drag
      v-loading="loading"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text"><span v-html="$t('dialog.Drag the file here or click on the upload')"></span></div>
      <div class="el-upload__tip" slot="tip">{{$t('dialog.Import type size msg', [accept, fileSize])}}</div>
    </el-upload>
    <span slot="footer">
      <el-link v-if="template" :href="template" icon="el-icon-download" :underline="false" type="primary" target="_blank" class="fl">{{$t('dialog.Download the template')}}</el-link>
      <el-button type="primary" @click="win.show = false">{{$t('button.OK')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { baseURL } from '@/api'

export default {
  name: 'import',
  props: {
    // 弹框基础参数
    win: {
      required: true,
      type: Object
    },
    // 导入接口地址 (如无此项着不显示导入按钮)
    api: {
      required: true,
      type: String
    },
    // 导入接口参数
    data: {
      type: Object,
      default: () => {}
    },
    // 导入文件大小限制 单位MB
    fileSize: {
      type: Number,
      default: 5
    },
    // 模板下载地址
    template: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      baseURL,
      headers: {}, // 请求头
      accept: '.xls,.xlsx', // 支持的文件类型
      loading: 0 // 上传中个数
    }
  },
  mounted() {
    this.headers.token = this.$store.getters.GET_TOKEN
  },
  methods: {
    /**
     * 上传前
     */
    beforeUpload(file) {
      const isSize = file.size / 1024 / 1024 < this.fileSize
      if (!isSize) {
        this.$message.warning(`${file.name}${this.$t('message.FileSize cannot exceed')}${this.fileSize}MB!`)
        return false
      }
      ++this.loading
      return true
    },
    /**
     * 上传成功
     */
    success(response, file, fileList) {
      --this.loading
      this.$message.success(file.name + this.$t('message.Upload successful'))
    },
    /**
     * 上传失败
     */
    error(err, file, fileList) {
      --this.loading
      this.$message.error(err.type + file.name + this.$t('message.Upload failed please try again later'))
    }
  }
}
</script>
<style lang="less" scoped>
  .el-upload-dragger .el-icon-loading{
    font-size: 67px;
    color: #C0C4CC;
    margin: 40px 0 16px;
    line-height: 50px;
  }
  /deep/ .el-upload-list__item-name{
    padding-left: 0;
  }
  .el-upload__tip {
    word-break: break-word;
  }
</style>
